<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加课程分类树</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">

    <!-- 导入Ztree -->
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.all.min.js"></script>
    <!-- 基本功能 -->
    <script type="text/javascript" src="/ztree/js/jquery.ztree.core.js"></script>
    <!-- 复选功能 -->
    <script type="text/javascript" src="/ztree/js/jquery.ztree.excheck.js"></script>
    <!-- 编辑功能 -->
    <script type="text/javascript" src="/ztree/js/jquery.ztree.exedit.js"></script>
</head>
<body>
    <div>
        <div id="demo">
            <!--树-->
            <ul id="treeDemo" class="ztree" ></ul><!--//style="margin-top: 20px;margin-left: 40px"-->
        </div>
    </div>

    <p style="text-align: center;"><span  id="choice" >您当前选择的课程分类是：</span> <span id="addChoice" style="color: red;"></span></p>
    <div style="text-align: center;">
        <input value="确定" type="button" class="layui-btn" onclick="queding()"/>
        <input value="取消" type="button" class="layui-btn" onclick="qvxiao()"/>
        <input name="classId" id="classId" type="text" hidden/>
    </div>
</body>
    <script>
        layui.use(['jquery','layer'],function(){
            var $ = layui.jquery;
            var layer = layui.layer;
            //数据回显
            var classId = parent.$("#classId").val();
            var addChoicespan2 = parent.$("#addChoicespan2").text();//获取父 树分类内容
            $("#addChoice").text(addChoicespan2);
            $("#classId").val(classId);
            //树
            var setting = {
                data: {
                    simpleData: {
                        enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                        idKey: "id",  //节点数据中保存唯一标识的属性名称
                        pIdKey: "parnetId",    //节点数据中保存其父节点唯一标识的属性名称
                        rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                    },
                    key: {
                        name: "name"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                    }
                },
                check:{
                    enable: true,
                    /*chkboxType: { "Y": "p", "N": "s" },
                    chkStyle: "radio",
                    radioType: "all"*/
                },
                expandSpeed :"fast",

                view:{
                    showLine: false,
                    dblClickExpand :false
                },
                callback: {//复选框要选择多个的时候获取树的nodeId是否相同，相同则不设置
                    beforeCheck : function(treeId, treeNode) {
                        var zTree = $.fn.zTree.getZTreeObj(treeId);
                        zTree.checkAllNodes(false);
                        return true;
                    }
                }
            };
            var zTree;
            $(document).ready(function(){
                $.ajax({
                    url: '/course/getCourseTree',
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        zTree = $.fn.zTree.init($("#treeDemo"), setting, data.data);//初始化树
                        zTree.expandAll(true);    //true 节点全部展开、false节点收缩
                        /* 复选框回显 */
                        if($('input[name = classId]',window.parent.document).val()){
                            var node = zTree .getNodeByTId("tree_"+$('input[name = classId]',window.parent.document).val());
                            zTree.checkNode(node, true, true);//所有子节点都会被选中,小bug
                        }
                    }
                })
            });

            qvxiao = function qvxiao(){
                var player = parent.layer;
                player.close(player.index);
            }

            queding = function queding() {
                var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes = zTreeObj.getCheckedNodes(true);
                var addChoice = "";
                var classification = "";
                var classId = "";
                for (var i = 1; i < nodes.length; i++) {
                    addChoice += nodes[i].name+ ">";//所有节点的名字
                    classification = nodes[i].name;//单个节点名
                    classId = nodes[i].id;
                }
                addChoice = addChoice.substring(0,addChoice.length-1);
                parent.$("#addChoicespan1").text("您选择的课程课程分类是 : ");
                parent.$("#addChoicespan2").text(addChoice);
                parent.$("#className").val(classification);
                parent.$("#classId").val(classId);
                var player = parent.layer;
                player.close(player.index);
            }

        });
    </script>
</html>